<template>
    <div class="container" :style="'min-height: ' + docheight + 'px'">
      <div v-if="!showTimeOut&&showCont">
        <div class="mainCont">
          <div class="mainHead">店铺商品</div>
          <div class="mainList">
            <div class="cosList maxCosList">
              <div class="maxCosItem" :key="index" v-for="(item,index) in goodsArr">
                <div class="cosImg">
                  <img :src="item.goods_image+ossSrc" @click="ctrlEdit(item)" />
                  <listCtrl @delClick="delFn" @editClick="ctrlEdit" :index="index"  :item="item"></listCtrl>
                </div>
                <div class="cosItemInfo" @click="ctrlEdit(item)">
                  <div class="cosName">
                    {{ item.goods_name }}
                  </div>
                  <div class="cosDes">
                    <div>销量：{{ item.goods_sale }}</div>
                  </div>
                  <div class="cosPrice">
                    <div>¥ <span style="font-size: 0.9rem;">{{ item.goods_price }}</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="loadMore" v-if="goodsArr.length>0">{{ loadMoreText }}</div>
          <nodata v-if="goodsArr.length==0" text="暂无商品，快去添加吧~"></nodata>
          <div class="addBox" @click="addFn" v-if="goodsArr.length==0">+新增商品</div>
        </div>
        <div v-if="goodsArr.length>0" class="addBtn iconfont icon-xinzengshangpin" @click="addFn"></div>
      </div>
      <footcpm></footcpm>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
    import listCtrl from '@/components/public/listCtrl.vue';
    import nodata from '@/components/public/nodata'

  import footcpm from '@/components/footcpm'
  import {Goods,delGoods} from "@/http/api";
  import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    export default {
      components: {nodata,listCtrl,getLoad,getTimeOut,footcpm},
      data() {
        return {
          showTimeOut:false,
          showCont:true,
          loadMoreText:'数据加载中~',
          goodsArr:[],
          // 分页
          getting:false,
          last_page:0,
          per_page:10,
          page:1,
        }
      },
      props: {},
      methods:{
        addFn(){
          this.$router.push({path:'/addGoods'})
        },
        delFn(obj){
          let data = {
            goods_id:obj.item.goods_id
          }
          if(!this.showLoad){
            this.showLoad = true
            delGoods(data).then((res)=>{
              if(res.data.code==1){
                this.goodsArr.splice(obj.index,1)
              }else{
                this.showToast = true
                this.showText = '删除失败'
              }
              this.showLoad = false
            }).catch((err)=>{
                this.showLoad = false
                this.showToast = true
                this.showText = '网络超时'
            })
          }
        },
        ctrlEdit(item){
            this.$router.push({path:'/editGoods',query:{id:item.goods_id}})
        },
        getData(){
          let data = {
            per_page: this.per_page,
            page: this.page
          }
          Goods(data).then((res)=>{
            this.showCont= true
            if(res.data.code==1){
              if(res.data.data&&res.data.data.data&&res.data.data.data.length>0){
                let arr = res.data.data.data
                for(let i=0;i<arr.length;i++){
                  arr[i]['showPopover'] = false
                  this.goodsArr.push(arr[i])
                }
                setTimeout(() => {
                  this.getting = false
                }, 100);
                this.last_page = res.data.data.last_page
                if(this.page==this.last_page){
                  this.loadMoreText = '到底啦～'
                }else{
                  this.loadMoreText = '数据加载中~'
                }
              }else{
                this.last_page = 0
              }
            }else{
              this.showToast = true
              this.showText = res.data.msg
            }
          }).catch(()=>{
            this.showTimeOut = true
            this.showCont= true
          })
        },
        nextfn(){
          if(this.$route.path=='/goods'){
            let h = document.documentElement.scrollHeight||document.body.scrollHeight
            let wh = document.documentElement.clientHeight||document.body.clientHeight
            let top = document.documentElement.scrollTop||document.body.scrollTop
            let bottom = h-wh-top
            if(bottom<=50){
              if(this.getting==false){
                if(this.last_page>this.page){
                  this.getting=  true
                  this.page++
                  this.getData()
                }
              }
            }
          }
        },
      },
      mounted(){
        window.addEventListener('scroll',this.nextfn)
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .container {
    padding-bottom: 3.75rem;
    box-sizing: border-box;
    padding-top: 0.75rem;
    background-color: #edf2ff;

    .mainCont{
      width: 92%;
      position: relative;
      background-color: #fff;
      border-radius: 0.75rem;
      overflow: hidden;
      margin: 0 auto;
      padding: 0 4%;
      padding-bottom: 0.75rem;
      box-sizing: border-box;
      .mainHead{
        font-size: 0.8rem;
        font-weight: bold;
        padding: 0.75rem 0;
      }
      
      .mainList{
        width: 100%;
        margin-top: 0.75rem;
        margin-bottom: 1.25rem;
        .cosList{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .maxCosItem{
            width: 48%;
            margin-bottom: 0.75rem;
            .cosImg{
              width: 100%;
              position: relative;
              border-radius: 0.25rem;
              overflow: hidden;
              font-size: 0;
              
              img{
                width: 100%;
              }
            }
            .cosItemInfo{
              .cosName{
                  width: 100%;
                  margin-top: 0.25rem;
                  margin-bottom: 0.25rem;
                  font-size: 0.7rem;
                  font-weight: bold;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
                .cosDes{
                  color: #999;
                  font-size: 0.6rem;
                  display: flex;
                  justify-content: space-between;
                }
                .cosPrice{
                  display: flex;
                  align-items: center;
                  color: #6d94f8;
                  .svipTag{
                    // font-size: 0.6rem;
                    // background-color: #6d94f8;
                    // color: white;
                    // padding: 0.1rem 0.5rem;
                    // margin-right: 0.25rem;
                    // border-radius: 0.25rem;
                  }
                }
            }
            
          }
        }
      }
      .loadMore{
      text-align: center;
      padding: 0.75rem 0;
      font-size: 0.6rem;
      color: #6d94f8;
    }
    .addBox{
        width: 100%;
        text-align: center;
        line-height: 2.2rem;
        background-color: #6d94f8;
        color: #fff;
        border-radius: 0.25rem;
        margin-top: 3rem;
    }
    }
    .addBtn{
        position: fixed;
        right: 4%;
        bottom: 4rem;
        width: 3rem;
        height: 3rem;
        text-align: center;
        font-size: 1.5rem;
        line-height:3rem;
        color: white;
        border-radius: 50%;
        background-color: rgba(109, 148, 248,0.5);
    }
  }
  </style>
  <style >
  .van-notice-bar{
    padding: 0;
    box-sizing: border-box;
  }
  </style>
  